<template>
  <div class="container">
    <el-row style="height: 100vh;width: 100%">
<!--      区域树-->
      <el-col :span="4" class="left">
        <el-input placeholder="请输入关键字搜索..." clearable size="mini" suffix-icon="el-icon-search" v-model="filterText"></el-input>
        <div class="mt10">
          <el-tree
            ref="tree"
            :data="dataTreeList"
            :props="defaultProps"
            :filter-node-method="filterNode"
            :highlight-current="true"
            v-loading="treeLoading"
            :current-node-key="currentNodeKey"
            @node-click="handleNodeClick"
            :default-expand-all="true"
          >
          </el-tree>
        </div>
      </el-col>
      <el-col :span="20" class="right">
        <div class="right-card">
          <div class="header">
            <span>通讯拓扑图</span>
            <span class="title">{{title}}</span>
          </div>
          <div style="width: 100%;height:100%;" id="main_echarts"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import * as echarts from 'echarts';
const treeData = [
  {
    name: "单位",
    symbol: 'image://' + require('../../assets/images/topology/danwei.png'),
    symbolSize: 30, // 图片大小
    children: [
      {
        name: '项目',
        symbol: 'image://' + require('../../assets/images/topology/project.png'),
        symbolSize: 30, // 图片大小
        value: 100,
        children: [
          {
            name: '单元',
            value: 100,
            symbol: 'image://' + require('../../assets/images/topology/danyuan.png'),
            symbolSize: 30, // 图片大小
            collapsed: false,
            children: [
              {
                name: '采集器1',
                value: 100,
                collapsed: false,
                symbol: 'image://' + require('../../assets/images/topology/caijiqi.png'),
                symbolSize: 30, // 图片大小
                children: [
                  {
                    symbol: 'image://' + require('../../assets/images/xb.png'),
                    symbolSize: [100, 100], // 图片大小
                    name: '智能仪表1',
                    value: 100,
                  },{
                    symbol: 'image://' + require('../../assets/images/xb.png'),
                    symbolSize: [100, 100], // 图片大小
                    name: '智能仪表2',
                    value: 100,
                  }
                ],
              },{
                name: '采集器2',
                value: 100,
                collapsed: false,
                symbol: 'image://' + require('../../assets/images/topology/caijiqi.png'),
                symbolSize: 30, // 图片大小
                children: [
                  {
                    symbol: 'image://' + require('../../assets/images/xb.png'),
                    symbolSize: [100, 100], // 图片大小
                    name: '智能仪表3',
                    value: 100,
                  }
                ],
              },{
                name: '采集器3',
                value: 100,
                collapsed: false,
                symbol: 'image://' + require('../../assets/images/topology/caijiqi.png'),
                symbolSize: 30, // 图片大小
                children: [
                  {
                    symbol: 'image://' + require('../../assets/images/xb.png'),
                    symbolSize: [100, 100], // 图片大小
                    name: '智能仪表4',
                    value: 200,
                  }
                ],
              }
            ]
          }
        ],
      }
    ]
  }
]
export default {
  name: 'CommunicationTopology',
  data() {
    return {
      // 拓扑图标题
      title: '',
      // 区域树搜索框数据
      filterText: '',
      // 区域树数据
      dataTreeList: [{
        label: '雅达工业园',
        children: [{
          label: '01#电房',
        },{
          label: '02#电房',
        },{
          label: '03#电房',
        }]
      }],
      // 区域树配置
      defaultProps: {
        children: "children",
        label: "label"
      },
      // 当前选中的节点
      currentNodeKey: [],
      // 区域树加载状态
      treeLoading: false,
      // 图表实例
      myChart: null,
      // 图表配置项
      option:{
        symbol: 'emptyCircle',
        orient: 'vertical',
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove'
        },
        series: [
          {
            type: 'tree',
            left: '2%',
            right: '2%',
            top: '8%',
            bottom: '20%',
            orient: 'vertical',
            expandAndCollapse: true,
            data: treeData,
            label: {
              position: 'top',
              verticalAlign: 'middle',
              align: 'right',
              fontSize: 14
            },
            leaves: {
              label: {
                position: 'bottom',
                verticalAlign: 'middle',
                align: 'left'
              }
            },
            animationDurationUpdate: 750
          }
        ]

      }
    }
  },
  mounted() {
    this.initEcharts()
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    // 点击区域树节点
    handleNodeClick(data) {
      this.title = data.label
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 初始化图表
    initEcharts() {
      const chartDom = document.getElementById('main_echarts')
      this.myChart = echarts.init(chartDom)
      this.myChart.setOption(this.option)
    }
  },

}
</script>
<style scoped lang="scss">
  .container {
    width: 100%;
    height: 100vh;
    background: whitesmoke;
    .left{
      padding: 20px 10px 10px 10px;
      height: 100vh;
      background: #fff;
    }
    .right{
      padding: 10px 10px;
      height: 90vh;
      .right-card{
        height: 100%;
        width: 100%;
        box-shadow: 0 0 5px #ccc;
        border: 1px solid #DCDFE6;
        background: #fff;
        padding: 20px 20px;
        .header{
          padding-left: 10px;
          //height: 30px;
          //line-height: 30px;
          font-size: 18px;
          font-weight: 550;
          border-left: 4px solid #00ad80;
          .title{
            margin-left: 20px;
            color: #00ad80;
          }
        }
      }
    }
  }
</style>
